<template>
	<div class="member-collect-brand-page">
		<XtxCenterHead title="关注的品牌" />
		<div class="xtx-collect-brand" style="position: relative; min-height: 400px">
			<ul>
				<li>
					<a href="#/brand/7541387078984064" class=""
						><div class="head">
							<span class="iconfont icon-dingwei fl"></span
							><span class="area fl">玉树藏族自治州</span><span class="unlike fr">取消关注</span>
						</div>
						<div
							class="logo"
							style="
								background-image: url('https://img10.360buyimg.com/seckillcms/s175x75_jfs/t1/140098/34/10906/4351/5f8965b0E32d63299/4861e97020a38325.png!cc_175x75.webp');
							"></div>
						<p class="name">构治分王日走</p>
						<p class="desc">称界政四</p></a
					>
				</li>
				<li>
					<a href="#/brand/6401918547136410" class=""
						><div class="head">
							<span class="iconfont icon-dingwei fl"></span><span class="area fl">肇庆市</span
							><span class="unlike fr">取消关注</span>
						</div>
						<div
							class="logo"
							style="
								background-image: url('https://img10.360buyimg.com/seckillcms/s175x75_jfs/t1/140098/34/10906/4351/5f8965b0E32d63299/4861e97020a38325.png!cc_175x75.webp');
							"></div>
						<p class="name">被太象很本</p>
						<p class="desc">率张海质什</p></a
					>
				</li>
				<li>
					<a href="#/brand/1569196211843198" class=""
						><div class="head">
							<span class="iconfont icon-dingwei fl"></span><span class="area fl">三亚市</span
							><span class="unlike fr">取消关注</span>
						</div>
						<div
							class="logo"
							style="
								background-image: url('https://img10.360buyimg.com/seckillcms/s175x75_jfs/t1/140098/34/10906/4351/5f8965b0E32d63299/4861e97020a38325.png!cc_175x75.webp');
							"></div>
						<p class="name">复业完</p>
						<p class="desc">非火界府</p></a
					>
				</li>
				<li>
					<a href="#/brand/3632985898509522" class=""
						><div class="head">
							<span class="iconfont icon-dingwei fl"></span><span class="area fl">铜仁市</span
							><span class="unlike fr">取消关注</span>
						</div>
						<div
							class="logo"
							style="
								background-image: url('https://img10.360buyimg.com/seckillcms/s175x75_jfs/t1/140098/34/10906/4351/5f8965b0E32d63299/4861e97020a38325.png!cc_175x75.webp');
							"></div>
						<p class="name">她接此</p>
						<p class="desc">军引设标安况</p></a
					>
				</li>
				<li>
					<a href="#/brand/7714097079015148" class=""
						><div class="head">
							<span class="iconfont icon-dingwei fl"></span><span class="area fl">天津市</span
							><span class="unlike fr">取消关注</span>
						</div>
						<div
							class="logo"
							style="
								background-image: url('https://img10.360buyimg.com/seckillcms/s175x75_jfs/t1/140098/34/10906/4351/5f8965b0E32d63299/4861e97020a38325.png!cc_175x75.webp');
							"></div>
						<p class="name">理由放年论么</p>
						<p class="desc">日可人派历备</p></a
					>
				</li>
				<li>
					<a href="#/brand/2453586728903108" class=""
						><div class="head">
							<span class="iconfont icon-dingwei fl"></span><span class="area fl">宝鸡市</span
							><span class="unlike fr">取消关注</span>
						</div>
						<div
							class="logo"
							style="
								background-image: url('https://img10.360buyimg.com/seckillcms/s175x75_jfs/t1/140098/34/10906/4351/5f8965b0E32d63299/4861e97020a38325.png!cc_175x75.webp');
							"></div>
						<p class="name">想最发</p>
						<p class="desc">组华明去九</p></a
					>
				</li>
				<li>
					<a href="#/brand/2307686250311924" class=""
						><div class="head">
							<span class="iconfont icon-dingwei fl"></span><span class="area fl">中卫市</span
							><span class="unlike fr">取消关注</span>
						</div>
						<div
							class="logo"
							style="
								background-image: url('https://img10.360buyimg.com/seckillcms/s175x75_jfs/t1/140098/34/10906/4351/5f8965b0E32d63299/4861e97020a38325.png!cc_175x75.webp');
							"></div>
						<p class="name">流争收速</p>
						<p class="desc">半直并该</p></a
					>
				</li>
				<li>
					<a href="#/brand/2772337842336506" class=""
						><div class="head">
							<span class="iconfont icon-dingwei fl"></span><span class="area fl">龙岩市</span
							><span class="unlike fr">取消关注</span>
						</div>
						<div
							class="logo"
							style="
								background-image: url('https://img10.360buyimg.com/seckillcms/s175x75_jfs/t1/140098/34/10906/4351/5f8965b0E32d63299/4861e97020a38325.png!cc_175x75.webp');
							"></div>
						<p class="name">活在当强性</p>
						<p class="desc">即值该但准备</p></a
					>
				</li>
				<li>
					<a href="#/brand/4780560842558178" class=""
						><div class="head">
							<span class="iconfont icon-dingwei fl"></span><span class="area fl">晋中市</span
							><span class="unlike fr">取消关注</span>
						</div>
						<div
							class="logo"
							style="
								background-image: url('https://img10.360buyimg.com/seckillcms/s175x75_jfs/t1/140098/34/10906/4351/5f8965b0E32d63299/4861e97020a38325.png!cc_175x75.webp');
							"></div>
						<p class="name">收组行样划</p>
						<p class="desc">亲半作第</p></a
					>
				</li>
				<li>
					<a href="#/brand/4929497482235372" class=""
						><div class="head">
							<span class="iconfont icon-dingwei fl"></span><span class="area fl">九龙</span
							><span class="unlike fr">取消关注</span>
						</div>
						<div
							class="logo"
							style="
								background-image: url('https://img10.360buyimg.com/seckillcms/s175x75_jfs/t1/140098/34/10906/4351/5f8965b0E32d63299/4861e97020a38325.png!cc_175x75.webp');
							"></div>
						<p class="name">革极海小</p>
						<p class="desc">车装元织及光</p></a
					>
				</li>
				<li>
					<a href="#/brand/1033095263527926" class=""
						><div class="head">
							<span class="iconfont icon-dingwei fl"></span><span class="area fl">平凉市</span
							><span class="unlike fr">取消关注</span>
						</div>
						<div
							class="logo"
							style="
								background-image: url('https://img10.360buyimg.com/seckillcms/s175x75_jfs/t1/140098/34/10906/4351/5f8965b0E32d63299/4861e97020a38325.png!cc_175x75.webp');
							"></div>
						<p class="name">天知装办件学</p>
						<p class="desc">龙队先别样行特</p></a
					>
				</li>
				<li>
					<a href="#/brand/5769454653381218" class=""
						><div class="head">
							<span class="iconfont icon-dingwei fl"></span><span class="area fl">重庆市</span
							><span class="unlike fr">取消关注</span>
						</div>
						<div
							class="logo"
							style="
								background-image: url('https://img10.360buyimg.com/seckillcms/s175x75_jfs/t1/140098/34/10906/4351/5f8965b0E32d63299/4861e97020a38325.png!cc_175x75.webp');
							"></div>
						<p class="name">从当接点部</p>
						<p class="desc">少世中在表低市</p></a
					>
				</li>
			</ul>
		</div>
	</div>
</template>

<script>
import XtxCenterHead from '@/components/library/xtx-center-head';
import { getMyCollection } from '@/api/member';
export default {
	name: 'CollectBrand',
	components: { XtxCenterHead },
	created() {
		getMyCollection(1, 10, 3).then(data => {
			console.log(data);
		});
	},
};
</script>

<style lang="less" scoped>
.member-collect-brand-page {
	position: relative;
	background-color: #fff;
	.xtx-collect-brand {
		position: relative;
		min-height: 400px;
		padding: 20px 25px;
		ul {
			display: flex;
			flex-wrap: wrap;
			li {
				width: 300px;
				height: 230px;
				background: #fff;
				border: 1px solid #eee;
				border-radius: 7px;
				margin-right: 20px;
				margin-bottom: 20px;
				transition: all 0.5s;
				.head {
					line-height: 60px;
					height: 60px;
					padding: 0 20px;
					.iconfont {
						float: left;
						font-size: 20px;
						color: #999;
					}
					.area {
						float: left;
						color: #999;
						padding-left: 2px;
					}
					.unlike {
						float: right;
						color: #27ba9b;
					}
				}
				.logo {
					width: 234px;
					height: 72px;
					background-color: #fff;
					background-repeat: no-repeat;
					background-position: 50%;
					background-size: contain;
					margin: 0 auto;
				}
				p {
					padding-top: 15px;
					text-align: center;
				}
				&:hover {
					box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
				}
			}
			li:nth-child(3n) {
				margin-right: 0;
			}
		}
	}
}
</style>
